<template>
    <div>
        <!--
        对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage
        sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
        localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

        localStorage在浏览器的隐私模式下面是不可读取的。
        localStorage本质上是对字符串的读取，有json格式时需要JSON.stringify()转化为字符串。
        localStorage不能被爬虫抓取到

        localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。
        sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。
        localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）
        sessionStorage作用域是窗口、协议、主机名、端口

        https://www.cnblogs.com/houzheng/p/9067110.html

        -->
        <button @click="saveLocalStorage">
            存储 localStorage
        </button>
        <br/>

        <button @click="deleteLocalStorage">
            删除 localStorage
        </button>
        <br>

        <button @click="clearLocalStorage">
            清除所有 localStorage
        </button>


        <br/>
        <button @click="readLocalStorage">
            读取 localStorage
        </button>

        <p>
            {{msg}}
        </p>


    </div>
</template>

<script>
    export default {
        name: "DemoLocalStorage",
        data() {
            return {
                msg: undefined
            }
        },
        methods: {
            saveLocalStorage() {
                //存字符串
                localStorage.setItem('key1', 'val01')
                //存json
                const info = {name: 'hou', age: 24, id: '001'};
                localStorage.setItem('key2', JSON.stringify(info));

            },
            readLocalStorage() {
                this.msg = localStorage.getItem('key1');
                console.log(JSON.parse(localStorage.getItem('key2')))

            },
            deleteLocalStorage() {
                //删除某个
                localStorage.removeItem('key1');
                this.msg = undefined;
            },
            clearLocalStorage() {
                //清除所有localStorage
                localStorage.clear();
            }
        }
    }
</script>

<style scoped>

</style>
